<template>
  <div>
    <van-nav-bar
      title="我的订单"
      left-text="返回"
      right-text="管理"
      left-arrow
      nav-bar-background-color="green"
      @click-left="onClickLeft"
      @click-right="onClickRight"
      style="background-color: #4fc08d; color: white"
    />
    <div class="orderList" v-for="item in orderList" :key="item.id">
      <span>收件人:{{ item.user.userName }}</span>
      <span>电话:13476183991</span>
      <p>收获地址: {{ item.user.address }}{{ item.user.area }}</p>
      <p>价格:{{ item.price }}</p>
      <!-- <span>{{ item.orderStatus }}</span>
      <span>{{ item.payStatus }}</span> -->
      <button id="btn">支付</button>
      <button id="btn1" @click="orderDetails(item.id)">查看详情</button>
    </div>
  </div>
</template>

<script>
import { GetOrderListAPI } from '../service/product';

export default {
  name: 'WorkspaceJsonOrders',

  data() {
    return {
      chosenAddressId: '1',
      list: [
        {
          id: '1',
          name: '钟白',
          tel: '13476183991',
          address: '河南省许昌市襄城县',
          isDefault: true,
        },
      ],
      orderList: [],
      page: 1,
      per: 10,
    };
  },
  async created() {
    const res = await GetOrderListAPI(this.page, this.per);
    this.orderList = res.data.data;
    console.log(this.orderList);
  },
  methods: {
    orderDetails(id) {
      this.$router.push({
        name: 'WorkspaceJsonOrderDetails',
        query: { id },
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {},
  },
};
</script>

<style scoped>
.orderList {
  width: 100%;
  height: 13%;
  margin-top: 20px;
  border-bottom: 1px solid green;
  padding-left: 10px;
}
.orderList span {
  padding-top: 3px;
  display: inline-block;
  margin-right: 25px;
}
.orderList #btn {
  display: block;
  margin-left: 250px;
  margin-top: -38px;
}
.orderList #btn1 {
  display: block;
  margin-left: 300px;
  margin-top: -27px;
}
div .van-address-list {
  width: 100%;
  height: 10%;
}
</style>
